import axios from "axios";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Tabs, Tag, Space } from "react-vant";

export interface ListRawState {
  id: string;
  title: string;
  price: string;
  experience: string;
  education: string;
  stack: string[];
  name: string;
  city: string;
}

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [list, setList] = useState<ListRawState[]>([]);
  const fetchList = async () => {
    const resp = await axios.get("/api/list");
    setList(resp.data.data);
  };
  useEffect(() => {
    fetchList();
  }, []);
  return (
    <div>
      <Tabs>
        <Tabs.TabPane title="推荐">
          {list.map((v, i) => {
            return (
              <div
                className="list-item"
                key={i}
                onClick={() =>
                  navigate("/detail/" + v.id, {
                    state: v,
                  })
                }
              >
                <div className="title">
                  <h4>{v.title}</h4>
                  <span>{v.price}</span>
                </div>
                <Space className="desc">
                  {[v.education, ...v.stack].map((v, i) => {
                    return <Tag key={i}>{v}</Tag>;
                  })}
                </Space>
                <div className="title">
                  <h4>{v.name}</h4>
                  <span>{v.city}</span>
                </div>
              </div>
            );
          })}
        </Tabs.TabPane>
        <Tabs.TabPane title="附近">附近</Tabs.TabPane>
        <Tabs.TabPane title="最新">最新</Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default Index;
